<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
//用于明确1鼠标的位置
import { ref } from "vue"
//props适配图片列表
defineProps({
  imageList: {
    type: Array,
    required:true,
    default:()=>[]}
 })

//小图切换大图函数
const activeIndex=ref(0)
const enterhandler=(i)=>{
    activeIndex.value=i
}



</script>

<template>
     <div class="goods-image">
         <!--左侧大图-->
         <div class="middle" ><!--给盒子进行绑定-->
            <img :src="imageList[activeIndex]" alt=""/>
         </div>
            <!--右侧小图-->
            <ul class="small">
                <li v-for="(img,i) in imageList" :key="i" @mouseenter="enterhandler(i)" :class="{active: i===activeIndex}"><!--给小图绑定鼠标事件-->
                    <img :src="img" alt="" />
                </li>
            </ul>
     </div>
</template>

<style scoped lang="scss">
.goods-image{
    width:500px;
    height:400px;
    position:relative;
    display: flex;
    .middle{
        width:400px;
        height:400px;
        background:#f5f5f5;
    }
    .small{
        width:100px;
        li{
            width:90px;
            height:90px;
            margin-left:12px;
            margin-bottom:15px;
            cursor:pointer;
            &:hover,
            &.active{
                border:2px solid #8cf0cb;
            }
        }
    }
}
</style>